import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';
import {Spin} from 'antd';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import ReButton from 'components/widgets/ReButton';
import AccountsDialog from 'components/services/AccountsDialog';
import Empty from 'components/widgets/Empty';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'AccountsManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    render() {

        return (
            <div className="orin-s-accountsmanage-root">
                <SetHelmet title="管理员账户管理"/>
                <AccountsDialog/>
                <div className="header-wrapper">管理员账户管理</div>
                <div className="search-wrapper">
                    <div className="search-right">
                        <ReButton label="添加管理员" className="add-btn"
                                  onClick={() => this.store.addAdminMethod()}/>
                    </div>
                </div>
                <div className="content-data-wrapper">
                    <div className="content-header-title">
                        <div className="content-number title">
                        </div>
                        <div className="content-name title">
                            <span>账号（可做登录）</span>
                        </div>
                        <div className="content-size title">
                            <span>手机号（可做登录）</span>
                        </div>
                        <div className="content-size title">
                            <span>身份</span>
                        </div>
                        <div className="content-more-btn title">
                            <span>更多</span>
                        </div>
                    </div>
                    <div className="content">
                        {
                            this.store.accountsList.map((item, index) => {
                                let popMenuOption = [{
                                    'name': '编辑',
                                    'func': (e) => this.store.editClick(item),
                                }, {
                                    'name': '修改密码',
                                    'func': (e) => this.store.modifyPwdClick(item),
                                }, {
                                    'name': item.type === $$.SEM.ACCOUNT_ACTIVE_STATE ? '冻结' : '解冻',
                                    'func': (e) => this.store.deleteClick(item),
                                }
                                ];
                                return (
                                    <div key={index} className="users-wrapper-pc">
                                        <div className="user-item-wrapper">
                                            <div className="content-number">
                                                <span className="text">
                                                    {index + 1}
                                                </span>
                                            </div>
                                            <div className="content-name">
                                                <p className="text">
                                                <span>
                                                    {item.name}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.phone}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.roleName}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-more-btn">
                                                {
                                                    popMenuOption.map((item, index) => {
                                                        return (
                                                            <div key={index} className="select-button"
                                                                 onClick={(e) => item.func && item.func()}>
                                                                <span className="btn-name">{item.name}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={!this.store.firstRequest} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }

                {
                    this.store.accountsList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂无管理员账号'}/>
                }
                {
                    this.store.accountsList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共有{this.store.accountsList.length}条数据
                        </div>
                    </div>
                }
            </div>
        );
    }
}